<template>

  <div class="homeDetail">

    <div class="tabr-nav-title">
       <van-nav-bar
        :title="title"
        style="width: 100%; height: 44px"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>

    <div class="container">

      <div class="homeHeader">

        <div class="homeHeader-left">

          <div class="item">
             <van-button
              :class="
                state.detail.level === '1'
                  ? 'high'
                  : state.detail.level === '2'
                    ? 'middle'
                    : 'low'
              "
              size="mini"
              >{{ mapStr(state.detail.level, 'level') }}</van-button
            >
          </div>

          <div class="item">
             <van-button color="#ee7e34" plain size="mini"
              > {{
                mapStr(state.detail.reWorkStatus, 'reWorkStatus')
              }}</van-button
            >
          </div>

          <div class="item">
             <van-button type="primary" plain size="mini"
              > {{
                state.detail.workType === '巡查工单' ? '巡查' : '值守'
              }}</van-button
            >
          </div>

          <div class="item" v-if="state.detail.isDrill == 1">
             <van-button color="#08c33b" plain size="mini"> 演练</van-button>
          </div>

        </div>
         <!-- <div>
           <van-button type="success" size="mini" @click="handleConnect"
            >单兵连线</van-button
          >
        </div> -->
      </div>

      <div class="cardList" @click="cardClick">

        <div class="list">

          <div class="left">工单编号：</div>

          <div class="right">{{ state.detail.code }}</div>

        </div>

        <div class="list">

          <div class="left">风险点：</div>

          <div class="right">{{ state.detail.riskPoint }}</div>

        </div>

        <div class="list">

          <div class="left">详细地址：</div>

          <div class="right"> {{ state.detail.workOrderAddress }} </div>

        </div>

        <div class="list">

          <div class="left">工单描述：</div>

          <div class="right"> {{ state.detail.workOrderDescription }} </div>

        </div>

        <div class="list">

          <div class="right" style="text-indent: 2em">
             {{ state.detail.describe }}
          </div>

        </div>

      </div>

      <div class="cardList" @click="cardClick">

        <div class="title">
           <van-icon name="arrow" />就位时间 {{
            state.detail.responsePositioningTime
              ? new Date(state.detail.responsePositioningTime).toLocaleString()
              : '-'
          }}
        </div>
         <!-- 图片展示 --> <van-grid :border="false" :column-num="3"
          > <van-grid-item
            > <van-image
              v-if="state.img.previewUri"
              class="previewImage"
              fit="contain"
              :src="state.img.previewUri"
              @click="showImagePreview([state.img.previewUri])"
            /> </van-grid-item
          > </van-grid
        > <!-- 展示 -->
      </div>

      <div class="cardList cardList3" @click="cardClick">

        <div class="title">
           <van-icon name="arrow" />响应情况 最新反馈时间 {{
            state.detail.responseTime
              ? new Date(state.detail.responseTime).toLocaleString()
              : '-'
          }}
        </div>

        <div class="list">

          <div class="left" style="width: 230px">
             应急抢险作业人员参与巡查处置（人次）：
          </div>

          <div class="right">{{ state.detail.personnelNumber }}</div>

        </div>

        <div class="list">

          <div class="left">特种车辆（车次）：</div>

          <div class="right">{{ state.detail.specialVehiclesNumber }}</div>

        </div>

        <div class="list">

          <div class="left">排涝设备（台次）：</div>

          <div class="right">{{ state.detail.pumpingEquipmentQuantity }}</div>

        </div>

        <div class="list">

          <div class="left">载人车辆（车次）：</div>

          <div class="right">{{ state.detail.mannedVehiclesNumber }}</div>

        </div>

        <div class="list">

          <div class="left">抽排能力（m³/h）：</div>

          <div class="right">{{ state.detail.frontForceNum }}</div>

        </div>

      </div>

      <div
        class="newList"
        @click="cardClick"
        v-if="state.detail.workType === '巡查工单'"
      >

        <div
          class="list"
          v-for="(item, index) in state.matterList"
          :key="index"
        >

          <div class="left"> {{ item.inspectionMatters }} </div>

          <div class="right" v-if="state.detail.reWorkStatus == 3">完成</div>

        </div>

      </div>

      <div class="cardList cardList5" @click="cardClick">

        <div class="title" style="color: #26a2de">
           <van-icon name="arrow" />完成上报 上报时间 {{
            finishTimeline.creatTime
              ? new Date(finishTimeline.creatTime).toLocaleString()
              : '-'
          }}
        </div>

        <div class="list">

          <div class="left">处置班组：</div>

          <div class="right">{{ state.detail.reTeamName }}</div>

        </div>

        <div class="list">

          <div class="left">班组组长：</div>

          <div class="right">{{ state.detail.teamLeader }}</div>

        </div>

        <div class="list">

          <div class="left" style="width: 90px">响应完成描述：</div>

          <div class="right">{{ finishTimeline.remark }}</div>

        </div>

      </div>

    </div>

    <div class="detailFoot" v-if="state.detail.reWorkStatus != 3">

      <div style="flex: 1" v-if="state.detail.reWorkStatus == 0">
         <van-button color="#26a2de" size="small" @click="handleResponse"
          >响应</van-button
        >
      </div>

      <div style="flex: 1" v-if="state.detail.reWorkStatus == 1">
         <van-button color="#26a2de" size="small" @click="handleReady"
          >就位</van-button
        >
      </div>

      <div style="flex: 1" v-if="state.detail.reWorkStatus == 2">
         <van-button type="success" size="small" @click="handleReport"
          >完成上报</van-button
        >
      </div>

    </div>

  </div>

</template>

<script setup>
  import { onMounted, reactive, ref } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import {
    getWorkTimelineDetail,
    getInspectionMatters,
    getResponseWordDetail,
    editWorkStatus,
    getList,
  } from '@/api/index'
  import { showConfirmDialog, showLoadingToast } from 'vant'
  import { showImagePreview } from 'vant'
  const router = useRouter()
  const route = useRoute()
  const title = route.query.tabTitle || '响应工单'
  const state = reactive({
    isReady: false,
    workId: '',
    detail: {},
    matterList: [],
    img: {},
  })

  const mapStr = (str, type) => {
    if (type === 'level') {
      switch (str) {
        case '1':
          return '高风险'
        case '2':
          return '中风险'
        case '3':
          return '低风险'
        default:
          return '低风险'
      }
    }
    if (type === 'reWorkStatus') {
      switch (str) {
        case 0:
          return '待响应'
        case 1:
          return '待就位'
        case 2:
          return '执行中'
        case 3:
          return '已完成'
      }
    }
  }
  const cardClick = () => {}
  //返回
  const onClickLeft = () => history.back()

  const handleConnect = () => {
    router.push('/video')
  }

  // 是否就位
  const handleReady = () => {
    // state.isReady = true;
    router.push({
      path: '/inPosition',
      query: {
        id: route.query.id,
      },
    })
  }
  // 响应
  const handleResponse = () => {
    showConfirmDialog({
      title: '响应',
      message: '确认是否响应',
    })
      .then(async () => {
        // on confirm
        await editWorkStatus({ ...state.detail, reWorkStatus: 1 })
        getDetail()
      })
      .catch(() => {
        // on cancel
      })
  }
  // 完成上报
  const handleReport = () => {
    router.push({
      path: '/completeReport',
      query: {
        id: route.query.id,
      },
    })
  }

  const finishTimeline = ref({})
  const getDetail = () => {
    getWorkTimelineDetail(state.workId).then((res) => {
      if (res.data && res.data.status == 200) {
        const cur =
          res.data.data?.filter((item) => item.itemPhase == 4)[0] ?? {}
        finishTimeline.value = cur
      }
    })
    getResponseWordDetail(state.workId).then((res) => {
      if (res.data && res.data.code == 200) {
        state.detail = res.data.data.reWorkMange

        if (
          res.data.data.reWorkMange.inspectionMatters &&
          res.data.data.reWorkMange.inspectionMatters !== ''
        ) {
          getInspectionMatters(
            res.data.data.reWorkMange.inspectionMatters,
          ).then((res) => {
            if (res.data && res.data.code == 200) {
              state.matterList = res.data.data
            }
          })
        }

        if (res.data.data?.logList?.length > 0) {
          const item = res.data.data?.logList.filter(
            (item) => item.itemPhase == 3,
          )[0]
          state.img = item?.fileList[0] || {}
        }
      }
    })
  }

  onMounted(() => {
    state.workId = route.query.id
    getDetail()
  })
</script>

<style scoped lang="less">
  .homeDetail {
  padding-bottom: 70px;
  background: #f7f8f7;
  padding: 0 6px;
  height: 100%;
}

.homeHeader {
  padding: 10px 10px 0 10px;
  background: #fff;
  display: flex;
}

.homeHeader-left {
  display: flex;
  align-items: center;
  flex: 1;
  flex-wrap: wrap;

  .item {
    margin-right: 5px;
    margin-bottom: 5px;

    &:last-child {
      margin-right: 0;
    }
  }
}

.container {
  height: calc(100vh - 135px);
  overflow-y: auto;
  background: #fff;
}

.tabr-nav-title {
  display: flex;
  align-items: center;
  font-weight: 600;
  height: 44px;
  margin-bottom: 10px;
  font-size: 18px;
  color: #29292c;
  line-height: 20px;
  text-align: center;
  font-style: normal;
  background: #fff;
}

.cardList {
  background: #fff;
  border-radius: 10px;
  padding-bottom: 1px;
  margin-bottom: 10px;
  padding: 10px;

  .title {
    border-bottom: 1px solid;
    padding: 10px 0;
    font-size: 14px;
  }

  .list {
    display: flex;
    color: #9b9b9b;
    margin-top: 10px;
    .left {
      width: 70px;
      white-space: nowrap;
    }

    .right {
      flex: 1;
    }
  }
}

.cardList3 {
  .list {
    .left {
      width: 110px;
    }
    .right {
      margin-top: 2px;
      flex: 1;
    }
  }
}

.van-button--mini {
  padding: 0 20px !important;
}

.newList {
  background: #fff;
  border-radius: 10px;
  padding-bottom: 1px;
  margin-bottom: 10px;
  padding: 10px;

  .list {
    width: 100%;
    background-color: rgba(242, 242, 242, 1);
    margin-bottom: 5px;
    padding: 8px 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &:last-child {
      margin-bottom: 0;
    }
    .left {
      color: #333;
      width: calc(100% - 50px);
    }
    .right {
      border: 1px solid #07c160;
      color: #07c160;
      background: #fff;
      padding: 5px 10px;
    }
  }
}

.detailFoot {
  width: 100vw;
  padding: 20px;
  background: #fff;
  position: fixed;
  bottom: 0px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
.van-button--small {
  width: 100%;
}

.high {
  background: #de2a26;
  color: #fff;
}
.middle {
  background: #1989fa;
  color: #fff;
}
.low {
  background: #07c160;
  color: #fff;
}
</style>

